// import { store } from "../../redux"
import * as React from 'react';
import { connect } from 'react-redux'
import {Popover,Avatar,Divider, Button} from '@mui/material';
import { ExitToApp, Settings } from '@mui/icons-material';
import { logout } from '../../utils/system/system';
import SettingsDialog from './SettingsDialog'
import { useTranslation } from 'react-i18next'
import './Profile.scss'


const Profile = (props) => {
  // 引入国际化
  const { t } = useTranslation()

  const [anchorEl, setAnchorEl] = React.useState(null);
  const [settingsDialogShow, setSettingsDialogShow] = React.useState(false);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  }
  const handleClose = () => {
    setAnchorEl(null)
  }
  // 控制dialog打开
  const settingsDialogOpen = () => {
    setSettingsDialogShow(true)
  }
  // 控制dialog关闭
  const handleCloseSettingDialog = () => {
    setSettingsDialogShow(false)
  }
  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;
  const optionClick = (optionName) => {
    switch(optionName) {
      case 'ExitToApp':
        logout()
        break
      case 'Settings':
        settingsDialogOpen()
        break
      default:
        return
    }
  }
  const options = [
    {
      id: 1,
      icon: <Settings style={{width: '0.9rem', height: '0.9rem'}}/>,
      optionName: t('system.userSettings'),
      onClick: () => optionClick('Settings')
    },
    {
      id: 2,
      icon: <ExitToApp style={{width: '0.9rem', height: '0.9rem'}}/>,
      optionName: t('system.logout'),
      onClick: () => optionClick('ExitToApp')
    }
  ]
  return (
    <div className="profileClass">
      <Avatar onClick={(e) => handleClick(e)} style={{width:'100%', height: '100%'}}></Avatar>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        sx={{padding: 8}}
      >
        <div className='profile-content'>
          <div className='profile-content-top'>
            <Avatar style={{width: '2rem', height: '2rem'}}/>
            <div style={{marginLeft: '0.8rem'}}>
              <p style={{fontWeight: 'bold'}}>{props.name}</p>
              <p className='email-p'>{props.email}</p>
            </div>
          </div>
          <Divider/>
          <div className='profile-content-content'>
            {
              options.map(item => {
                return (
                  <div className='userOptionItem' key={item.id}>
                    <Button className='userOptionItemBtn' onClick={() => item.onClick()}>
                      {item.icon}<span style={{marginLeft: '16px'}}>{item.optionName}</span>
                    </Button>
                  </div>
                )
              })
            }
          </div>
          <Divider/>
          <div className='profile-content-bottom'>
            {process.env.NODE_ENV === 'development' ? 'development' : '1.0.0'}
          </div>
        </div>
      </Popover>
      <SettingsDialog open={settingsDialogShow} handleCloseSettingDialog={handleCloseSettingDialog}/>
    </div>
  )
}

export default connect(state => state.auth.userInfo)(Profile)